<template>
    <div id="h-header" class="iconfont">
        <div class="head-left icon-user"></div>
        <div class="search">
            <i class="icon-search"></i>
            <span class="serach-txt">请出入城市/景点/酒店</span>
        </div>
        <div class="head-right">
            <router-link to="/city">
                <span>{{this.$store.state.city}}</span>
                <i class="icon-arrow-down"></i>
            </router-link>
        </div>
    </div>
</template>

<script>
    export default {}
</script>

<style lang="scss" scoped>
    @import "~css/varibles.scss";
    @import "~css/main.scss";

    #h-header {
        display: flex;
        line-height: $height86;
        background-color: $bgcolor;
        color: #ffe;
        font-size: .26rem;
        .head-left {
            font-size: .4rem;
            margin-left: $margin02;
            margin-right: .12rem;
            float: left
        }
        .search {
            flex: 1;
            height: $height64;
            line-height: $height64;
            margin-left: $margin02;
            margin-top: .1rem;
            background-color: #fefefe;
            border-radius: .1rem;
            color: #ccc;
            > i {
                padding: .1rem;
            }
        }
        .head-right {
            min-width: 1rem;
            float: right;
            text-align: center;
            padding: 0 .1rem;
            >a{
                text-decoration:none;
                color:#fff;
                .icon-down {
                    padding-left: 0.08rem;
                }

            }

        }
    }

</style>
